<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
          content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="./assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="./assets/css/demo.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
    <div class="container">
        <a class="navbar-brand" href="./"><strong>Oj-System</strong> zxj2022</a>
        <button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main"
                aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse offcanvas-collapse" id="navbar_main">
            <ul class="navbar-nav ml-auto align-items-lg-center">
                <h6 class="dropdown-header font-weight-600 d-lg-none px-0">Menu</h6>
                <li class="nav-item">
                    <a href="https://gitee.com" class="btn btn-sm bg-white d-none d-lg-inline-flex">代码获取</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<main class="main">
    <!--      大屏幕演示-->
    <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen"
             style="background-image: url('assets/images/backgrounds/img-1.jpg')">
        <span class="mask bg-primary alpha-7"></span>
        <div class="spotlight-holder py-lg pt-lg-xl">
            <div class="container d-flex align-items-center no-padding">
                <div class="col">
                    <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                        <div class="col-7">
                            <div class="text-center mt-5">
                                <img src="assets/images/brand/icon.png" style="width: 200px;" class="img-fluid animated"
                                     data-animation-in="jackInTheBox" data-animation-delay="1000">
                                <h2 class="heading display-4 font-weight-400 text-white mt-5 animated"
                                    data-animation-in="fadeInUp" data-animation-delay="2000">
                                    <span class="font-weight-700">Oj-System</span> zxj2022
                                </h2>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="slice slice-lg">
        <div class="jumbotron jumbotron-fluid">
            <div class="container" id="problem_detail">
            </div>
        </div>

        <div class="jumbotron">
            <h1 class="display-4">题目解答</h1>
            <div class="row mt-4">
                <div class="col-sm-12 pb-4">
                    <div class="form-group">
                        <label for="codeEditor">代码编辑框</label>
                        <div id="editor" style="min-height:400px">
                            <textarea class="form-control" id="codeEditor" style="width: 100%; height: 400px;"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-success" id="submit">提交</button>
        </div>

        <div>
            <h3>结果</h3>
            <div class="jumbotron jumbotron-fluid">
                <div class="container" id="result_detail">

                </div>
            </div>
        </div>

    </section>


</main>
<!-- Core -->
<script src="./assets/vendor/jquery/jquery.min.js"></script>
<script src="./assets/vendor/popper/popper.min.js"></script>
<script src="./assets/js/bootstrap/bootstrap.min.js"></script>
<!-- FontAwesome 5 -->
<!--    <script src="./assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>-->
<!-- Page plugins -->
<script src="./assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="./assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="./assets/vendor/input-mask/input-mask.min.js"></script>
<script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
<script src="./assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
<!-- Theme JS -->
<script src="./assets/js/theme.js"></script>

<!-- 引入 ace.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>

<script>
    console.log(location.search);
    function initAce() {
        // 参数 editor 就对应到刚才在 html 里加的那个 div 的 id
        let editor = ace.edit("editor");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/java");
        editor.resize();
        document.getElementById('editor').style.fontSize = '20px';

        return editor;
    }

    let editor = initAce();



    function initData() {
        $.ajax({
            url: "problem/selectProblemById" + location.search,
            type: "get",
            success: function (data) {
                console.log(data);
                /* 利用 data中的数据, 构造页面  下面形式的数据添加到 id=problem_detail 的div中
                    <h1 class="display-4">1.两数相加-简单</h1>
                    <p class="lead">
                        给定一个非负整数 num，反复将各个位上的数字相加，直到结果为一位数。返回这个结果。<br>
                        示例 1:<br>
                        <br>
                        输入: num = 38<br>
                        输出: 2<br>
                        解释: 各位相加的过程为：<br>
                        38 --> 3 + 8 --> 11<br>
                        11 --> 1 + 1 --> 2<br>
                        由于 2 是一位数，所以返回 2。<br>
                        <br>
                        示例 2:<br>
                        <br>
                        输入: num = 0<br>
                        输出: 0<br>
                    </p>
                */
                var id = data.problemId;
                var title = data.title;
                var level = data.level;
                var description = data.description;
                var templateCode = data.templateCode;

                // 注意将数据的换行符替换为 <br>
                description = description.replace(/\n/g, "<br>");
                // templateCode = templateCode.replace(/\n/g, "<br>");

                var html = "<h1 class='display-4'>" + id + "." + title + "-" + level + "</h1>";
                html += "<p class='lead'>" + description + "</p>";
                $("#problem_detail").html(html);

                // 设置代码编辑器的内容, 将 templateCode 的内容添加到 textarea 中
                editor.setValue(templateCode);

                // 给提交按钮添加点击事件
                $("#submit").click(function () {
                    // 获取编辑器中的代码
                    var code = editor.getValue();
                    console.log(code);
                    // 发送请求到服务器, 传递 code 和 problemId
                    $.ajax({
                        url: "compileAndRun",
                        type: "post",
                        data: {
                            code: code,
                            problemId: id
                        },
                        success: function (data) {
                            console.log(data);
                            // 将结果展示到页面上
                            var result = document.querySelector("#result_detail");
                            var code = data.code;
                            var reason = data.reason;
                            var stdout = data.stdout;
                            var stderr = data.stderr;
                            if (code === 0) {
                                // 直接填入 stdout
                                result.innerHTML = "<pre>" + stdout + "</pre>";
                            } else {
                                // 填入 stderr
                                result.innerHTML = "<pre>" + reason + "</pre>";
                            }
                        }
                    });
                });

            }
        });
    }

    initData();
</script>



</body>
</html>
